$(function () {
    // 获取
    var $outer = $('#outer');
    var $prev = $('#prev');
    var $next = $('#next');
    var $imgList = $('#imgList');
    var $lis = $('#imgList>li');
    var $points = $('#navDiv>a');
    var PAGE_WIDTH = 1226;
    var allWidth = PAGE_WIDTH * ($lis.length - 2);// 1226*7=8582
    // 当前图片下标
    var index = 0;

    // 点击向右(左)的图标, 切换到下(上)一页
    // 下一页
    $next.click(function () {
        nextPage();
    })
    // 上一页
    $prev.click(function () {
        prevPage();
    })

    // 每隔3s自动滑动到下一页
    var intervalId = setInterval(function () {
        nextPage();
    }, 3000);

    // 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
    $outer.hover(function () {
        clearInterval(intervalId);
    }, function () {
        intervalId = setInterval(function () {
            nextPage();
        }, 3000);
    });
    

    // 下一页
    function nextPage() {
        // 获取当前ul所在的位置
        var currLeft = $imgList.position().left;
        var nextoffset = -PAGE_WIDTH;
        // 偏移量：currLeft + nextoffset
        $imgList.css('left', currLeft + nextoffset).fadeIn();
        // 当到达最后一页时，最后一张改为第二页
        if (currLeft < -allWidth) {
            $imgList.css('left', -PAGE_WIDTH);
        }
    }

    // 下一页
    function prevPage() {
        // 获取当前ul所在的位置
        var currLeft = $imgList.position().left;
        var prevoffset = PAGE_WIDTH;
        // 偏移量：currLeft + prevoffset
        $imgList.css('left', currLeft + prevoffset);
        // 当到达第一页时，第一页改为最后一张
        if (currLeft > -PAGE_WIDTH) {
            $imgList.css('left', -allWidth + PAGE_WIDTH);
        }
    }

    
});

